import { Canvas, Story, Meta } from "@storybook/blocks";
import { MultiSelect, Stack } from "metabase/ui";
import * as MultiSelectStories from "./MultiSelect.stories";

<Meta of={MultiSelectStories} />

# MultiSelect

Our themed wrapper around [Mantine MultiSelect](https://v6.mantine.dev/core/multi-select/).

## Docs

- [Figma File](https://www.figma.com/file/21uCY0czmCfb6QBjRce0I8/Input-%2F-MultiSelect?type=design&node-id=1-96&mode=design&t=Mk8RP6HsneuWzHtr-0)
- [Mantine MultiSelect Docs](https://v6.mantine.dev/core/multiselect/)

## Examples

<Canvas of={MultiSelectStories.Default} />

### Size - md

<Canvas of={MultiSelectStories.EmptyMd} />

#### Asterisk

<Canvas of={MultiSelectStories.AsteriskMd} />

#### Clearable

<Canvas of={MultiSelectStories.ClearableMd} />

#### Description

<Canvas of={MultiSelectStories.DescriptionMd} />

#### Disabled

<Canvas of={MultiSelectStories.DisabledMd} />

#### Error

<Canvas of={MultiSelectStories.ErrorMd} />

#### Read only

<Canvas of={MultiSelectStories.ReadOnlyMd} />

#### Icons

<Canvas of={MultiSelectStories.IconsMd} />

#### Groups

<Canvas of={MultiSelectStories.GroupsMd} />

#### Large sets

<Canvas of={MultiSelectStories.LargeSetsMd} />

#### Searchable

<Canvas of={MultiSelectStories.SearchableMd} />

#### Creatable

<Canvas of={MultiSelectStories.CreatableMd} />

### Size - xs

<Canvas of={MultiSelectStories.EmptyXs} />

#### Asterisk

<Canvas of={MultiSelectStories.AsteriskXs} />

#### Clearable

<Canvas of={MultiSelectStories.ClearableXs} />

#### Description

<Canvas of={MultiSelectStories.DescriptionXs} />

#### Disabled

<Canvas of={MultiSelectStories.DisabledXs} />

#### Error

<Canvas of={MultiSelectStories.ErrorXs} />

#### Read only

<Canvas of={MultiSelectStories.ReadOnlyXs} />

#### Icons

<Canvas of={MultiSelectStories.IconsXs} />

#### Groups

<Canvas of={MultiSelectStories.GroupsXs} />

#### Large sets

<Canvas of={MultiSelectStories.LargeSetsXs} />

#### Searchable

<Canvas of={MultiSelectStories.SearchableXs} />

#### Creatable

<Canvas of={MultiSelectStories.CreatableXs} />
